<template>
    <div class="system-setting">
        <el-form class="w100 changewidth" label-width="180px">
            <el-form-item label="系统语言">
                <el-radio-group v-model="activeLang">
                    <el-radio v-for="item in langOptionsList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="系统主题">
                <el-radio-group v-model="activeTheme">
                    <el-radio v-for="item in themeOptionsList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="消息提示">
                <el-switch v-model="mascotState"></el-switch>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    export default {
        name: "SystemSetting",
        components: {},
        computed: {
            ...mapState('app', ['currentLang', 'langOption']),
            ...mapState('app', ['currentTheme', 'themeOption']),
            ...mapState('app', ['systemMascot']),

            langOptionsList() {
                return Object.values(this.langOption)
            },

            themeOptionsList() {
                return Object.values(this.themeOption)
            },

            activeLang: {
                set(val) {
                    this.$i18n.loadLanguageAsync(val);
                },
                get() {
                    return this.currentLang
                }
            },

            activeTheme: {
                set(val) {
                    this.$setTheme(val)
                },
                get() {
                    return this.currentTheme
                }
            },

            mascotState: {
                set(val) {
                    this.$store.dispatch('app/setMascotState', val)
                },
                get() {
                    return this.systemMascot
                }
            }

        },
        data() {
           
            return {
                
            };
        },
        methods: {
            
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {

        },
        beforeDestroy() {

        },
    };
</script>
<style lang="scss" scoped>
    .system-setting {
        width: 100%;
        height: 100%;
        font-size: 30px;
        letter-spacing: 2px;

        .changewidth {
            padding-top: 3%;
            width: 90%;

            .user-avatar {
                cursor: pointer;
                width: 70px;
                height: 70px;
                border-radius: 50%;
            }
        }

        .subButton {
            margin: 0 0 0 180px;
        }
    }
</style>